<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>电站信息</title>
    <!-- Import Element UI style -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css"/>
<!--    <link rel="stylesheet" href="/assets/index.css"/>-->
    <script src="/assets/vue.js"></script>
    <script src="/assets/index.js"></script>
    <script src="/assets/axios.min.js"></script>
</head>
<style>
    #header {
        display: flex;
        align-items: center
    }
</style>
<body>
<main>
    <div id="app">
        <h1>JFinal Data</h1>
        <el-form :inline="true" :model="queryForm" id="header">
            <el-form-item label="变电站ID" size="small">
                <el-input v-model="queryForm.zk_bdz_id" placeholder="请输入变电站ID"></el-input>
            </el-form-item>
            <el-form-item label="变电站名称" size="small">
                <el-input v-model="queryForm.zk_bdz_name" placeholder="请输入变电站名称"></el-input>
            </el-form-item>
            <el-form-item label="线路名称" size="small">
                <el-input v-model="queryForm.line_name" placeholder="请输入线路名称"></el-input>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="search" size="small" icon="el-icon-search">查询</el-button>
                <el-button type="success" @click="openDialog('add')" size="small" icon="el-icon-plus">新增</el-button>
                <el-button type="danger" @click="batchDelete" size="small" icon="el-icon-delete">批量删除</el-button>
                <el-popover
                        placement="top"
                        width="200"
                        trigger="hover"
                        content="清空查询框内容并重新加载页面">
                    <el-button @click="reset" size="small" slot="reference" icon="el-icon-refresh">重置</el-button>
                </el-popover>
            </el-form-item>
        </el-form>

        <!-- 弹窗 -->
        <el-dialog :title="dialogTitle" :visible.sync="dialogFormVisible" width="60%"
                   style="text-align: center;margin-top: -5vh">
            <el-form :model="form" label-position="right" label-width="100px" ref="form">
                <el-row :gutter="20">
                    <el-col :span="12" v-for="(item, index) in columns" :key="index">
                        <el-form-item :label="item.label" v-show="item.label !== 'Id'">
                            <el-input v-model="form[item.prop]" v-show="item.prop !== 'Id'"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="dialogFormVisible = false">取消</el-button>
                <el-button type="primary" @click="submitForm">{{ buttonType }}</el-button>
            </span>
        </el-dialog>


        <el-table :data="stationInfoList" style="width: 100%" @selection-change="handleSelectionChange" border>
            <el-table-column type="selection" width="55"></el-table-column>
            <el-table-column v-for="column in columns" :key="column.prop" :prop="column.prop" :label="column.label"
                             :width="column.width" align="center"></el-table-column>
            <el-table-column
                    fixed="right"
                    label="操作"
                    width="200"
                    align="center">
                <template slot-scope="scope">
<!--                    <el-button type="text" size="small" @click="openDialog('edit',scope.row)">编辑</el-button>-->
<!--                    <el-button @click="handleClick(scope.row.Id)" type="text" size="small">删除</el-button>-->
                    <el-button
                            size="mini"
                            @click="openDialog('edit',scope.row)">编辑</el-button>
                    <el-button
                            size="mini"
                            type="danger"
                            @click="handleClick(scope.row.Id)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
        <div class="block" style="text-align: center">
            <el-pagination
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page="currentPage"
                    :page-sizes="[10, 20, 30, 40]"
                    :page-size="pageSize"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="total">
            </el-pagination>
        </div>
    </div>
</main>
</body>
<script>
    new Vue({
        el: '#app',
        data: {
            queryForm: {
                zk_bdz_id: '',
                zk_bdz_name: '',
                line_name: ''
            },
            stationInfoList: [],
            columns: [
                {prop: 'Id', label: 'Id', width: "50"},
                {prop: 'zk_bdz_id', label: '变电站ID'},
                {prop: 'zk_bdz_name', label: '变电站名称'},
                {prop: 'line_name', label: '线路名称'},
                {prop: 'mode', label: 'mode'},
                {prop: 'Ua', label: 'Ua'},
                {prop: 'Ub', label: 'Ub'},
                {prop: 'Uc', label: 'Uc'},
                {prop: 'Uab', label: 'Uab'},
                {prop: 'Ubc', label: 'Ubc'},
                {prop: 'Uca', label: 'Uca'}
            ],
            total: 0,
            currentPage: 1,
            pageSize: 10,
            dialogFormVisible: false,
            dialogTitle: '',
            buttonType: '',
            form: {}, // 存储表单信息
        },
        //校验表单数据
        rules: {
            // 定义校验规则
            zk_bdz_id: [
                { required: true, message: '变电站ID不能为空', trigger: 'blur' },
            ],
            zk_bdz_name: [
                { required: true, message: '变电站名称不能为空', trigger: 'blur' },
            ],
            line_name: [
                { required: true, message: '线路名称不能为空', trigger: 'blur' },
            ],
        },
        mounted() {
            this.loadData();
        },
        methods: {
            //分页加载数据
            loadData() {
                axios.get('/stationInfo/searchStationInfo', {
                    params: {
                        zk_bdz_id: this.queryForm.zk_bdz_id,
                        zk_bdz_name: this.queryForm.zk_bdz_name,
                        line_name: this.queryForm.line_name,
                        currentPage: this.currentPage,
                        pageSize: this.pageSize
                    }
                })
                    .then(response => {
                        this.stationInfoList = response.data.list; // 设置数据列表
                        this.totalPage = response.data.totalPage; // 设置总页数
                        this.total = response.data.totalRow; // 设置总行数
                    })
                    .catch(error => {
                        console.error(error);
                    });
            },
            handleSelectionChange(selectedRows) {
                this.selectedRows = selectedRows.map(item => item.Id);
            },
            handleSizeChange(val) {
                this.pageSize = val;
                this.loadData();
            },
            handleCurrentChange(val) {
                this.currentPage = val;
                this.loadData();
            },
            search() {
                // 查询逻辑
                if (this.queryForm.zk_bdz_id === '' && this.queryForm.zk_bdz_name === '' && this.queryForm.line_name === '') {
                    this.$message({
                        message: '请输入查询条件',
                        type: 'warning'
                    });
                    return;
                }
                //当查询条件不为空时，重新加载数据
                this.loadData();
            },
            reset() {
                // 重置逻辑
                this.queryForm.zk_bdz_id = '';
                this.queryForm.zk_bdz_name = '';
                this.queryForm.line_name = '';
                this.currentPage = 1;
                this.pageSize = 10;
                this.loadData();
            },
            batchDelete() {
                // 批量删除逻辑
                if (this.selectedRows === undefined || this.selectedRows.length === 0) {
                    this.$message({
                        message: '请选择要删除的数据',
                        type: 'warning'
                    });
                    return;
                }
                let idsString = this.selectedRows.join(",");
                //提示将永久删除数据
                this.$confirm('此操作将永久删除选中数据, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    axios.get('/stationInfo/batchDelete', {params: {ids: idsString}})
                        .then(response => {
                            if (response.data === 'success') {
                                this.$message({
                                    message: '删除成功',
                                    type: 'success'
                                });
                                this.loadData();
                            } else {
                                this.$message({
                                    message: '删除失败',
                                    type: 'error'
                                });
                            }
                        })
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });
                });
            },
            //打开弹窗
            openDialog(title, row) {
                this.dialogTitle = title === 'add' ? '新增' : '编辑';
                this.buttonType = title === 'add' ? '提交' : '确定修改';
                this.form = row === undefined ? {} : row;
                this.dialogFormVisible = true;
            },
            submitForm() {
                // 检查表单数据是否为空对象
                if (Object.keys(this.form).length < 10) {
                    console.error("表单数据为空");
                    this.$message({
                        message: '请检查表单数据是否填写完整！',
                        type: 'error'
                    });
                    return;
                }
                // 校验通过，执行提交操作
                if (this.dialogTitle === '新增') {
                    axios.post('/stationInfo/saveStationInfo', this.form, {
                        headers: {
                            'Content-Type': 'application/x-www-form-urlencoded'
                        }
                    })
                    .then(response => {
                        if (response.data === 'success') {
                            this.$message({
                                message: '新增成功',
                                type: 'success'
                            });
                            this.loadData();
                            this.dialogFormVisible = false;
                        } else {
                            this.$message({
                                message: '新增失败',
                                type: 'error'
                            });
                        }
                    })
                } else {
                    axios.post('/stationInfo/updateStationInfo', this.form, {
                        headers: {
                            'Content-Type': 'application/x-www-form-urlencoded'
                        }
                    })
                    .then(response => {
                        if (response.data === 'success') {
                            this.$message({
                                message: '修改成功',
                                type: 'success'
                            });
                            this.loadData();
                            this.dialogFormVisible = false;
                        } else {
                            this.$message({
                                message: '修改失败',
                                type: 'error'
                            });
                        }
                    })
                }

            },

            //删除逻辑
            handleClick(Id) {
                axios.get('/stationInfo/deleteStationInfo', {params: {Id: Id}})
                    .then(response => {
                        if (response.data === 'success') {
                            this.$message({
                                message: '删除成功',
                                type: 'success'
                            });
                            this.loadData();
                        } else {
                            this.$message({
                                message: '删除失败',
                                type: 'error'
                            });
                        }
                    })
            }
        },
    });
</script>
</html>
